<template>
    <div>
        <!--     搜索查询输入框 -->
        <el-form :inline="true" :model="searchForm" class="demo-form-inline" style="margin-bottom: 0">
            <el-form-item label="用户名">
                <el-input v-model="searchForm.username" placeholder="请输入用户名" @input="initdp"></el-input>
            </el-form-item>
            <el-date-picker
                    v-model="value1"
                    type="datetimerange"
                    size="small"
                    format="yyyy 年 MM 月 dd 日 HH 小时 mm 分钟 ss 秒"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    :picker-options="pickerOption"
                    @change="dateFormat">
            </el-date-picker>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" @click="onSearch">查询</el-button>
                <el-button type="primary" @click="qkSearch">清空查询</el-button>
            </el-form-item>
        </el-form>
        <!--       主页面-->
        <el-table
                :data="tableData"
                border
                style="width: 100%">
            <el-table-column
                    prop="branchid"
                    label="订单编号"
                    width="80">
            </el-table-column>
            <el-table-column
                    prop="branchname"
                    label="店铺名"
                    width="80"
                    show-overflow-tooltip>
            </el-table-column>
            <el-table-column
                    prop="total"
                    label="总价"
                    width="80">
            </el-table-column>
            <el-table-column
                    prop="username"
                    label="用户"
                    width="80">
            </el-table-column>
            <el-table-column
                    prop="tel"
                    label="电话"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="remarks"
                    label="备注"
                    width="120"
                    show-overflow-tooltip>
            </el-table-column>
            <el-table-column
                    prop="placeTime"
                    label="下单时间"
                    width="120"
                    show-overflow-tooltip>
            </el-table-column>
            <el-table-column
                    prop="status"
                    label="订单状态"
                    width="100">
                <template slot-scope="scope">
                    <div slot="reference" class="name-wrapper">
                        <el-button type="primary"  size="small" style="background-color: #4cae4c;"  v-if="scope.row.status == 1">已付款</el-button>
                        <el-button type="success"  size="small" style="background-color:#FF5722;border:#FF5722;"  v-if="scope.row.status == 0">未付款</el-button>
                        <el-button type="info"  size="small" style="background-color:#FF5722;border:#FF5722;"  v-if="scope.row.status == 2">正在发货</el-button>
                        <el-button type="success"  size="small" style="background-color:#FF5722;border:#FF5722;"  v-if="scope.row.status == 3">已完成</el-button>
                    </div>
                </template>
            </el-table-column>
            <el-table-column
                    fixed="right"
                    label="操作"
                    >
                <template slot-scope="scope">
                    <el-button type="primary" v-if="scope.row.status==1" @click="confirmShipment(scope.row)">确认发货</el-button>
                    <el-button type="primary" @click="outLibraryGoodsForm(scope.row)">详细信息</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="pageSizes"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
        </el-pagination>

<!--        //点击详情获取弹窗  -->
        <el-dialog
                title="出库信息"
                :visible.sync="dialogTableVisible"
                style="width: 100%">
            <el-table :data="gridData" max-height="300">
                <el-table-column  property="goodsUrl" label="商品图" width="100">
                    <template slot-scope="scope">
                        <img :src="scope.row.goodsUrl" width="50px" height="20px">
                    </template>
                </el-table-column>
<!--                <el-table-column property="xid" label="出库编号" width="100"></el-table-column>-->
                <el-table-column property="goodsname" label="商品名" width="100"></el-table-column>
                <el-table-column property="num" label="商品数量"></el-table-column>
                <el-table-column property="goodsPrice" label="售价"></el-table-column>
                <el-table-column property="total" label="总价"></el-table-column>
            </el-table>
            <el-pagination
                    @size-change="handleSizeChang"
                    @current-change="handleCurrentChang"
                    :current-page="currentPag"
                    :page-sizes="spageSizes"
                    :page-size="spageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="tota">
            </el-pagination>
        </el-dialog>

    </div>
</template>

<script>
    export default {
        name: "OrderManage",
        data(){
            return {
                tableData: [],
                //当前页码
                currentPage: 1,
                pageSizes: [5, 10, 15, 20],
                pageSize: 5,
                total: 0,

                //存储模糊查询信息
                searchForm: {},
                //日期时间选择器
                value1:'',
                startTime:'',
                endTime:'',

                //获取弹出层详细信息
                gridData:[],
                //控制详情信息弹出层
                dialogTableVisible:false,
                //订单详情分页---当前页码
                currentPag: 1,
                spageSizes:[5,10,15,20],
                spageSize:5,
                tota:0,

                pickerOption: { // 自定义周期快捷选项
                    shortcuts: [{
                        text: '最近一周',
                        onClick: (picker => {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', [start, end]);
                            //this.searchChangeDate();
                        })
                    }, {
                        text: '最近一个月',
                        onClick: (picker => {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                            picker.$emit('pick', [start, end]);
                            //this.searchChangeDate();
                        })
                    }, {
                        text: '最近三个月',
                        onClick: (picker => {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                            picker.$emit('pick', [start, end]);
                            //this.searchChangeDate();
                        })
                    }],
                    //禁用当天之后的时间(若要禁用当天之前的时间则)
                    disabledDate(time) {
                        return time.getTime() > Date.now()
                    },
                },
                status:0

            }
        },
        created() {
            this.initdp();
        },
        methods:{
            //查询所有
            initdp(){
                // http://localhost:7799/branch/br?currentPage=1&pageSize=5
                var that = this;
                this.$http.post("/order/order/backFindAllOrder?currentPage="+this.currentPage+"&pageSize="+this.pageSize,this.searchForm).then(function (result){
                    console.log(result)
                    that.tableData = result.data.data.list
                    that.total = result.data.data.total
                })
            },
            //模糊查询操作
            onSearch(){
                this.currentPage = 1;
                this.initdp();
            },
            // 清空模糊查询
            qkSearch(){
                this.searchForm = {}
                this.value1=''
                this.startTime=''
                this.endTime=''
                this.initdp();
            },
            dateFormat(picker) {
                if (picker != null) {
                    this.searchForm.startTime = picker[0].toString();
                    this.searchForm.endTime = picker[1].toString();

                }
            },

            //分页操作
            handleSizeChange(val) {
                console.log("每页"+ val+"条");
                this.pageSize = val;
                this.initdp();
            },
            handleCurrentChange(val) {
                console.log("当前页:"+val);
                this.currentPage = val;
                this.initdp();
            },
            outLibraryGoodsForm(row){
                this.dialogTableVisible= true;
                console.log(row)

                // http://192.168.1.20:8401/order/order/findOrderByOrderId/"+this.orderId
                this.$http.post("/order/order/orderfindOrderByOrderId?currentPage="+this.currentPag+"&pageSize="+this.spageSize,row).then( result =>{
                    console.log(result);
                    this.gridData = result.data.data.list;
                    this.tota = result.data.data.total
                })
            },
            //详情信息---分页操作
            handleSizeChang(val) {
                console.log("每页"+ val+"条");
                this.pageSiz = val;
                this.initdp();
            },
            handleCurrentChang(val) {
                console.log("当前页:"+val);
                this.currentPag = val;
                this.initdp();
            },
            //确认发货   0未付款1已付款2正在发货3确认收货
            confirmShipment(row){
                console.log(row)
                console.log(this.tableData.status)
                row.status=2;
                this.$http.post("/order/order/confirmShipment",row).then(result=>{
                    console.log(result);
                    if (result.data.code==2000){
                        this.initdp();
                        this.$message.success(result.data.msg);
                        this.settt()
                    }else {
                        this.$message.error(result.data.msg);
                    }
                })


            },
            settt(){
                //设置定时任务,3秒调用一次
                let timer = setTimeout(() => {
                    //需要定时执行的代码
                    row.status = 3;
                    this.confirmShipment(row);
                }, 1000 * 60 * 60 * 24)
            }

        }
    }
</script>

<style scoped>

</style>